
<template>
    <el-button @click="handleAdd()">添加内容</el-button>
    <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="title" label="标题" width="220" />
        <el-table-column prop="image" label="图片" width="120" />
        <el-table-column prop="cid" label="分类" width="120" />
        <el-table-column prop="desc" label="描述" width="600" />
        <el-table-column prop="create_time" label="时间" width="150" />
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="handleDelete(row.id)">删除</el-button>
                <el-button link type="primary" size="small" @click="handleEdit(row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <edit-popup v-if="showEdit" ref="editRef" @success="getItems" @close="showEdit = false" />
</template>
<script lang="ts" setup>

import { getArticleList } from "@/api/news.ts";
import { nextTick, ref, reactive, shallowRef, watch, defineComponent } from 'vue'
import EditPopup from './Edit.vue'
import router from "../../router";

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const formRef = shallowRef<FormInstance>()
const queryParams = reactive({
    status: '',
    name: ''
})
const showEdit = ref(false)
// const getLists = async () => {
//     loading.value = true
//     lists.value = await deptLists(queryParams)
//     loading.value = false
// }

const tableData = reactive({
    list: []
})

const getItems = async () => {
    const res = await getArticleList()
    tableData.list = res.data
    console.log(res)
}

getItems()

const handleDelete = (id:number) => {
    console.log(id)
    console.log("删除")
}

const handleAdd = () => {
    router.push('/article/add')    
    console.log("添加")
}

const handleEdit = (id: number) => {
    router.push('/article/edit?id='+id)    
    console.log('编辑');
}

</script>